<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        <div>姓名：{{student.name}}</div>
        <div>性别：{{student.sex}}</div>
        <button @click="addSex">addSex</button>
    </div>
    <script>
        /*
            vue中我们会把数据写在data里，但是有的时候我们data里面的某个数据对象可能一开始没有某个属性，但是后面因为开发需求我们又要在用户点击时加上。这个时候其实vue的数据劫持是无法自动识别到的，我们必须要使用Vue.set()
        */ 
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    student:{
                        name:'mikaisa'
                    }
                }
            },
            methods:{
                addSex(){
                    // 用法也很简单, 第一个参数是需要做改变的对象本身，第二个参数是你想改变他的哪个属性(如果没有则会自动添加上)，第三个参数是你想把这个属性变成什么值
                    Vue.set(this.student,'sex','男')
                }
            }
        })

        console.log(app);
    </script>
</body>
</html>